<template>
	<view class="search">
		<!-- #ifdef MP-WEIXIN -->
			<view class="wx-nav">
				<view @click="goIndex" class="iconfont icon-xiajiantou"></view>
				<input @blur="addSearch" class="search-input" type="text" focus="true" bindinput="bindKeyInput" placeholder-class="search-placeholder" value="" placeholder="nike" />
				<text @tap="goSearchList" class="nav-search f-color">搜索</text>
			</view>
		<!-- #endif -->
		<Lines />
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">最近搜索</view>
				<view @tap="clearHistory" class="iconfont icon-lajitong"></view>
			</view>
			<view v-if='inputValue !=""'>
				<!-- <view class="search-name f-color"
					v-for="(item,index) in inputvalue"
					:key = 'index'>
				{{item}}
				</view> -->
				<view class="search-name f-color"
						@tap="toSearchList(inputValue)">
					{{inputValue}}</view>	
			</view>
			<view v-else class="search-end f-color">
				暂无搜索记录
			</view>
		</view>
		<view class='search-item'>
			<view class='search-title'>
				<view class='f-color'>热门搜索</view>
			</view>
			<view>
				<view class='search-name f-color'>四件套</view>
				<view class='search-name f-color'>面膜</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输入框的值
				inputValue:"面膜",
			}
		},
		methods: {
			//获取文本框内容
			// getText: function(event) {
			//             // this.inputValue = event.target.value
			// 			console.log(event.target.value);
			// },
			//点击返回键，返回上一页
			goIndex() {
				//跳转到首页
				uni.switchTab({
					url: '../index/index'
				});
			},
			//跳转到搜索结果页面
			goSearchList(){
				uni.navigateTo({
					url:'../search-list/search-list'
				})
			},
			//失去焦点时触发方法，记录最近搜索词
			addSearch:function(event) {
				if(event.target.value ==''){
					return uni.showToast({
						title:"关键字不能为空",
						icon:"none"
					})
				}
				//获取输入框的值
				this.inputValue = event.target.value;
				//跳转到搜索结果页
				this.toSearchList(this.inputValue)
			},
			// 清除搜索记录
			clearHistory() {
				uni.showModal({
					title:"重要提示",
					content:"是否清除搜索记录",
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						// 点击了确定按钮
						if(res.confirm){
							uni.removeStorage({
								key:"searchData"
							})
							this.searchData = [];
						}
					}
				})
			},
			//点击搜索记录进入页面
			toSearchList(inputValue){
					uni.navigateTo({
						url:'../search-list/search-list?inputValue='+this.inputValue+''
					})
			}
		}
	}
</script>

<style scoped>
//顶栏样式
.wx-nav {
	margin-top: 100rpx;
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}
.iconfont {
	margin-left: 40rpx;
}
.search-input {
	width: 70%;
	text-align: left;
	border: 2rpx solid #C0C0C0;
	border-radius: 30rpx;
	background-color: #F7F7F7;
}
.nav-search {
	margin-right: 20rpx;
	font-size: 24rpx;
}

/* //页面的内容布局样式 */
.search-item{
	padding:20rpx;
}
.search-title{
	display: flex;
	justify-content: space-between;
}
.search-name{
	padding:4rpx 24rpx;
	line-height: 40rpx;
	background-color: #E1E1E1;
	display: inline-block;
	border-radius: 26rpx;
	margin:10rpx;
}
.search-end{
	text-align: center;
}
</style>
